﻿<script setup lang="ts" name="Upload">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { getUploadDataInFormData } from '@/api/uploadPage'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const imageConfig = ref({
  accept: 'image/*',
  helpText: '',
  thumb: true,
  multiple: true,
  maxSize: 2,
  maxNumber: 10,
  type: 'image'
})

const audioConfig = ref({
  accept: 'audio/*',
  helpText: '',
  thumb: false,
  multiple: true,
  maxSize: 50,
  maxNumber: 1,
  type: 'audio'
})

const videoConfig = ref({
  accept: 'video/*',
  helpText: '',
  thumb: false,
  multiple: false,
  maxSize: 100,
  maxNumber: 10,
  type: 'video'
})

const docConfig = ref({
  accept: 'application/*,text/*',
  helpText: '',
  thumb: false,
  multiple: false,
  maxSize: 50,
  maxNumber: 1,
  type: 'application'
})

const fileConfig = ref({
  accept: '',
  helpText: '',
  thumb: true,
  multiple: true,
  type: 'file'
})

const initData: any = ref({})

const getInitData = () => {
  getUploadDataInFormData(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      initData.value = res.data
    }
  })
}
onMounted(() => {
  getInitData()
})

const saveUpload = (v) => {
  if (v.buttonType === 'upload') {
    initData.value[v.fileType + 'Upload'].push(...v.data)
  }
}

const saveData = () => {
  console.log(initData.value)
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-alert title="上传图片类型文件，该规则下，选择的文件夹内只能看到图片类型文件，支持文件多选" type="success" :closable="false" />
      <UploadButton :config="imageConfig" :data="initData.imageUpload" @save="saveUpload"></UploadButton>
      <el-alert title="上传音频类型文件，该规则下，选择的文件夹内只能看到音频格式文件，支持文件多选，只能上传1个文件" type="success" :closable="false" />
      <UploadButton :config="audioConfig" :data="initData.audioUpload" @save="saveUpload"></UploadButton>
      <el-alert title="上传视频类型文件，该规则下，选择的文件夹内只能看到视频格式文件，不支持文件多选" type="success" :closable="false" />
      <UploadButton :config="videoConfig" :data="initData.videoUpload" @save="saveUpload"></UploadButton>
      <el-alert title="上传文档类型文件，该规则下，选择的文件夹内只能看到允许的文档格式文件，不支持文件多选，只能上传1个文件" type="success" :closable="false" />
      <UploadButton :showPreviewBtn="false" :config="docConfig" :data="initData.applicationUpload" @save="saveUpload"></UploadButton>
      <el-alert title="上传文件类型不做限制，所有类型文件都能看到并能进行选择，支持文件多选" type="success" :closable="false" />
      <UploadButton :config="fileConfig" :data="initData.fileUpload" @save="saveUpload"></UploadButton>
      <el-button type="primary" @click="saveData">{{ $t('buttons.buttonSave') }}</el-button>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;

    .upload-button {
      margin-bottom: 20px;
    }
  }
}

.el-alert {
  margin-bottom: 20px;
}
</style>
